<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>备件管理系统 - 供应商评价管理</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
</head>
<body>
<div id="app">
  <!-- 页面标题插槽 -->
  <h2 style="display: none;"><slot name="pageTitle">供应商评价管理</slot></h2>

  <!-- 页面头部插槽 -->
  <header class="header">
    <h2 style="margin: 0;">供应商评价管理</h2>
  </header>

  <!-- 主体内容插槽 -->
  <main>
    <!-- 新增按钮 -->
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <!-- 新增供应商评价按钮 -->
      <el-button type="primary" @click="showAddForm = true">新增供应商评价</el-button>
      
      <!-- 搜索框与退出按钮容器 -->
      <div style="display: flex; flex-direction: column; align-items: flex-end; gap: 10px;">
        <el-button type="info" size="small" @click="logout">退出</el-button>
        <el-input v-model="searchQuery" placeholder="请输入搜索内容" style="width: 300px;"></el-input>
      </div>
    </div>

    <!-- 弹窗新增表单 -->
    <el-dialog v-model="showAddForm" title="新增供应商评价" width="40%">
      <el-form :model="newSupplierEvaluation" label-position="left" label-width="100px" style="max-width: 400px;">
        <el-form-item label="供应商ID">
          <el-input v-model="newSupplierEvaluation.supplierid"></el-input>
        </el-form-item>
        <el-form-item label="交货及时性">
          <el-input v-model="newSupplierEvaluation.deliveryTimeliness"></el-input>
        </el-form-item>
        <el-form-item label="质量评分">
          <el-input v-model="newSupplierEvaluation.qualityScore"></el-input>
        </el-form-item>
        <el-button type="primary" @click="addSupplierEvaluation" style="width: 100%">添加</el-button>
      </el-form>
    </el-dialog>

    <!-- 表格 -->
    <el-table :data="filteredEvaluations" border style="width: 100%">
      <el-table-column prop="evaluationid" label="ID"></el-table-column>
      <el-table-column prop="supplierid" label="供应商ID"></el-table-column>
      <el-table-column prop="deliveryTimeliness" label="交货及时性"></el-table-column>
      <el-table-column prop="qualityScore" label="质量评分"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="mini" type="danger" @click="deleteSupplierEvaluation(scope.row.evaluationid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 底部固定 -->
    <footer class="footer">
      &copy; 2025 备件管理系统 - 版权所有
    </footer>
  </main>

  <!-- 引入 Vue + Axios + Element Plus -->
  <script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/element-plus"></script>

  <script>
    const { createApp } = Vue;
    const apiClient = axios.create({
      //本机地址
      //baseURL: 'http://localhost:8086',
      //服务器 地址
      baseURL: 'http://8.137.85.243:8086',
      timeout: 5000
    });

    const app = createApp({
      data() {
        return {
          supplierEvaluations: [],
          newSupplierEvaluation: { supplierid: null, deliveryTimeliness: null, qualityScore: null },
          searchQuery: '',
          showAddForm: false // 控制新增表单显示
        };
      },
      computed: {
        // 过滤后的供应商评价列表
        filteredEvaluations() {
          if (!this.searchQuery) {
            return this.supplierEvaluations;
          }
          return this.supplierEvaluations.filter(evaluation => 
            evaluation.supplierid.toString().includes(this.searchQuery) ||
            evaluation.evaluationid.toString().includes(this.searchQuery)
          );
        }
      },
      mounted() {
        this.loadSupplierEvaluations();
      },
      methods: {
        async loadSupplierEvaluations() {
          const res = await apiClient.get('/api/supplierevaluations/listall');
          this.supplierEvaluations = res.data;
        },
        async addSupplierEvaluation() {
          if (!this.newSupplierEvaluation.supplierid || !this.newSupplierEvaluation.deliveryTimeliness || !this.newSupplierEvaluation.qualityScore) {
            alert('请填写完整信息');
            return;
          }
          await apiClient.post('/api/supplierevaluations/insert', this.newSupplierEvaluation);
          this.newSupplierEvaluation = { supplierid: null, deliveryTimeliness: null, qualityScore: null };
          this.loadSupplierEvaluations();
        },
        async deleteSupplierEvaluation(id) {
          if (!confirm('确定删除？')) return;
          await apiClient.delete(`/api/supplierevaluations/delete/${id}`);
          this.loadSupplierEvaluations();
        },
        logout() {
          window.location.href = '/operator.html';
        }
      }
    });

    app.use(ElementPlus);
    app.mount('#app');
  </script>
</div>
</body>
</html>